import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';
const echrts = () => {
    const chartRef = useRef(null);
    useEffect(() => {
        const chartDom = chartRef.current;
        // document.getElementById('echarts')
        // 1、初始化echarts图表  传入一个展示数据的dom
        const myChart = echarts.init(chartDom);
        // 2、定义option数据
        const option = {
            title: {
                text: 'my echarts',
            },
            xAxis: {
                type: 'category',
                data: ['苹果', '香蕉', '橙子', '葡萄', '西瓜'],
            },
            yAxis: {
                type: 'value',
            },
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [100, 200, 150, 80, 90],
                },
            ],
        };
        // 3、将option数据传入echarts.init()方法，完成图表的绘制  第二个参数为true解决数据黏带问题
        option && myChart.setOption(option, true);
        return () => {
            // 销毁echarts
            myChart.clear();
        }
    }, [])
    return <div style={{ height: '100vh' }} ref={chartRef} />
}

export default echrts
